<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
		<link rel="shortcut icon" href="../../assets/ico/favicon32.ico" type="image/x-icon" />
		<link rel="stylesheet" href="../../lib/layui/css/layui.css">
		<link rel="stylesheet" href="../../common/common.css">
		<link rel="stylesheet" href="./workbench.css">
		<title>工作台</title>
	</head>
	<body class="layui-layout-body">
		<div class="layui-layout layui-layout-admin">
			<div class="layui-header index-header">
				<div class="layui-logo"><img src="../../assets/img/logo.png" alt=""></div>
				<!-- 头部区域（可配合layui已有的水平导航） -->

				<ul class="layui-nav layui-layout-right index-header">
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="../../assets/img/help.png" class="layui-nav-img">帮助
						</a>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="../../assets/img/user2.png" class="layui-nav-img us">昵称
						</a>
					</li>
					<li class="layui-nav-item">
						<a href="javascript:;">
							<img src="../../assets/img/out.png" class="layui-nav-img">
						</a>
					</li>
				</ul>
			</div>
			<div class="layui-tab">
				<div class="layui-side layui-bg-black">
					<div class="layui-side-scroll">
						<!-- 左侧导航区域（可配合layui已有的垂直导航） -->
						<div class="look">
							<img src="../../assets/img/big.png" class="work work-look1">
						</div>
						<ul class="layui-nav layui-nav-tree layui-tab-title left_tab" lay-filter="test">
							<li class="layui-nav-item layui-this">
								<img src="../../assets/img/work.png" class="work"><span>工作台</span>
							</li>
							<li class="layui-nav-item">
								<img src="../../assets/img/num.png" class="work"><span>数据管理</span>
							</li>
						</ul>
					</div>
				</div>

				<div class="layui-body SJDP layui-tab-content Num">
					<!-- 内容主体区域 -->
					<div class="layui-tab-item layui-show">
						<ul class="cont">
							<li class="cont-li">
								<div class="cont-top">数据大屏</div>
								<div class="cont-bottom">
									<div class="contB-left"><img src="../../assets/img/sj.png" alt=""></div>
									<div class="contB-right">
										<a href="../../page/num/num.html">
											<div class="kuang">进入</div>
										</a>
										<div class="kuang" onclick="window.location.href = '../../page/tuceng/tuceng.html'">创建</div>
									</div>
								</div>
							</li>
							<li class="cont-li">
								<div class="cont-top">移动文档</div>
								<div class="cont-bottom">
									<div class="contB-left"><img src="../../assets/img/pho.png" alt=""></div>
									<div class="contB-right">
										<div class="kuang">进入</div>
										<div class="kuang">创建</div>
									</div>
								</div>
							</li>
							<li class="cont-li">
								<div class="cont-top">动态PPT</div>
								<div class="cont-bottom">
									<div class="contB-left"><img src="../../assets/img/ppt.png" alt=""></div>
									<div class="contB-right">
										<div class="kuang">进入</div>
										<div class="kuang">创建</div>
									</div>
								</div>
							</li>
							<li class="cont-li">
								<div class="cont-top">移动门户</div>
								<div class="cont-bottom">
									<div class="contB-left"><img src="../../assets/img/door.png" alt=""></div>
									<div class="contB-right">
										<div class="kuang">进入</div>
										<div class="kuang">创建</div>
									</div>
								</div>
							</li>
						</ul>
						<img src="../../assets/img/yuna.png" alt="" class="Num-img">
					</div>

					<div class="layui-tab-item sjk" style="background-color: #fff">
						<div class="layui-tab layui-tab-brief lTop" lay-filter="docDemoTabBrief">
							<ul class="layui-tab-title">
								<li class="layui-this">数据库</li>
								<li>第三方接口</li>
							</ul>
							<div class="layui-tab-content">
								<div class="layui-tab-item layui-show">
									<div class="SJ-top">
										<div class="SJT-left">
											<div>全部数据库<span>0</span>个</div>

										</div>
										<div class="SJT-right">
											<button class="btn sj-button">
												<i class="layui-icon">&#xe654;</i>新建数据源
											</button>
											<div class="SJT-ss">
												<input type="text" class="suos" placeholder="请输入关键字">
												<i class="iconfont ic">&#xe618;</i>
											</div>

										</div>
									</div>

								</div>
								<di class="layui-tab-item">
									<div class="SJ-top">
										<div class="SJT-left">
											<div>全部第三方接口<span>0</span>个</div>

										</div>
										<div class="SJT-right">
											<button type="button" class="btn">
												<i class="layui-icon">&#xe654;</i> 新建组
											</button>
											<div class="SJT-ss">
												<input type="text" class="suos" placeholder="请输入关键字">
												<i class="iconfont ic">&#xe618;</i>
											</div>

										</div>
									</div>

								</di>

							</div>
						</div>
						<div class="sj-num">
							<div class="sj-top">
								<i class="iconfont">&#xe6cc;</i>
								<span>新增数据源</span>
							</div>
							<ul class="sj-bottom">
								<li>
									<div class="sjleft sjs1">
										<img src="assets/img/book.png" alt="">
									</div>
									<p>ORACLE</p>
								</li>
								<li>
									<div class="sjleft sjs2">
										<img src="assets/img/book.png" alt="">
									</div>
									<p>PostgreSQL</p>

								</li>
								<li class="sj-li" onmouseover="SJmove()" onmouseout="SJout()">
									<div class="sjleft sjs3">
										<img src="assets/img/book.png" alt="">
									</div>
									<p>MySQL</p>
									<div class="sj-fu">
										<i class="iconfont" onclick="shownum()">&#xe678;</i>
									</div>
								</li>
								<li>
									<div class="sjleft sjs4">
										<img src="assets/img/book.png" alt="">
									</div>
									<p>MariaDB</p>

								</li>
								<li>
									<div class="sjleft sjs5"><img src="assets/img/book.png" alt=""></div>
									<p>SQLServer</p>
								</li>
							</ul>

						</div>
					</div>
				</div>
			</div>

			<!--    <div class="layui-footer">-->
			<!--        &lt;!&ndash; 底部固定区域 &ndash;&gt;-->
			<!--        © layui.com - 底部固定区域-->
			<!--    </div>-->
			<div class="sj-Num">
				<div class="sjN-conten">
					<div class="sjNc-top">
						<span>新增MySQL数据</span>
						<i class="iconfont" onclick="hidenum()">&#xe714;</i>
					</div>
					<div class="sjNc-cont">
						<div class="sjNc-input">
							<span>数据库名称:</span>
							<input type="text" placeholder="请输入数据源名称">
						</div>
						<div class="sjNc-input">
							<span>数据库地址:</span>
							<input type="text" placeholder="请输入数据库地址">
						</div>
						<div class="sjNc-input">
							<span>数据库端口:</span>
							<input type="text" placeholder="请输入数据库端口">
						</div>
						<div class="sjNc-input">
							<span>数据库/ODBC:</span>
							<input type="text" placeholder="请输入数据库/ODBC">
						</div>
						<div class="sjNc-input">
							<span>数据库用户名:</span>
							<input type="text" placeholder="请输入数据库用户名">
						</div>
						<div class="sjNc-input">
							<span>数据库密码:</span>
							<input type="text" placeholder="请输入数据库密码">
						</div>
						<a href="">测试连接</a>
						<p>小提示：请设置您的数据库允许我们的服务器IP：101.37.90.165连接。</p>
					</div>
					<div class="tab-bottom">
						<button type="button" class="btn-primary">确定</button>
						<button type="button" class="btn" onclick="hidenum()">取消</button>
					</div>
				</div>
			</div>
		</div>
	</body>
	<script src="../../lib/jquery/jquery-3.0.0.min.js"></script>
	<script src="../../lib/layui/layui.js"></script>
	<script src="../../common/common.js"></script>
	<script src="./workbench.js"></script>
	<script>
		var i = 0;
		$('.look').click(function() {
			if (i == 0) {
				$('.layui-body').css({
					'left': '40px',
					'z-index': '1000',
					'transition': ' all 0.5s ease'
				})
				$('.look').css({
					'width': '50px',
					'padding': '0',
					'transition': ' all 0.5s ease'
				})
				i = 1;
			} else {
				$('.layui-body').css({
					'left': '150px',
					'transition': ' all 0.5s ease'
				})
				// $('.work-look1').css({'visibility': 'hidden'})
				$('.look').css({
					'width': '120px',
					'padding': '0 15px',
					'transition': ' all 0.5s ease'
				})
				i = 0;
			}
		});
	</script>
</html>
